<template>
  <div class="dashboard">
    <div class="page-header">
      <h2>数据统计</h2>
      <button class="btn btn-primary" @click="loadStats">
        🔄 刷新
      </button>
    </div>

    <div v-if="loading" class="loading">加载中...</div>

    <div v-else>
      <!-- 统计卡片 -->
      <div class="stats-grid">
        <div class="stat-card">
          <div class="stat-icon">📦</div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.totalOrders }}</div>
            <div class="stat-label">总订单数</div>
          </div>
        </div>

        <div class="stat-card">
          <div class="stat-icon">⏰</div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.pendingOrders }}</div>
            <div class="stat-label">待支付订单</div>
          </div>
        </div>

        <div class="stat-card">
          <div class="stat-icon">✅</div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.paidOrders }}</div>
            <div class="stat-label">已支付订单</div>
          </div>
        </div>

        <div class="stat-card highlight">
          <div class="stat-icon">💰</div>
          <div class="stat-info">
            <div class="stat-value">¥{{ (stats.totalAmount || 0).toFixed(2) }}</div>
            <div class="stat-label">总销售额</div>
          </div>
        </div>

        <div class="stat-card">
          <div class="stat-icon">📅</div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.todayOrders }}</div>
            <div class="stat-label">今日订单</div>
          </div>
        </div>

        <div class="stat-card">
          <div class="stat-icon">💵</div>
          <div class="stat-info">
            <div class="stat-value">¥{{ (stats.todayAmount || 0).toFixed(2) }}</div>
            <div class="stat-label">今日销售额</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getStats } from '../api/stats';

const stats = ref({
  totalOrders: 0,
  pendingOrders: 0,
  paidOrders: 0,
  totalAmount: 0,
  todayOrders: 0,
  todayAmount: 0
});
const loading = ref(false);

const loadStats = async () => {
  loading.value = true;
  try {
    const res = await getStats();
    if (res.success) {
      stats.value = res.data;
    } else {
      alert(res.message || '加载失败');
    }
  } catch (error) {
    console.error('加载统计数据失败:', error);
    alert('网络错误');
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  loadStats();
});
</script>

<style scoped>
.dashboard {
  max-width: 100%;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-card.highlight {
  background: linear-gradient(135deg, #1AAD19 0%, #52c41a 100%);
  color: white;
}

.stat-icon {
  font-size: 36px;
  line-height: 1;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  opacity: 0.8;
}
</style>
